<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>遍历文档</title>
    </head>
    <body>

        <div class="wrapper">
            <ul>
                <li>111</li>
                <li>112</li>
                <li> <input type="text" name="username" placeholder="用户名"> </li>
            </ul>
            <ul>
                <li>121</li>
                <li>122</li>
                <li> <input type="radio" name="gender" value="male"> </li>
            </ul>
        </div>

        <div class="wrapper">
            <ul>
                <li>211</li>
                <li>212</li>
            </ul>
            <ul>
                <li>221</li>
                <li>222</li>
            </ul>
        </div>

        <div class="wrapper">
            <ul>
                <li>311</li>
                <li>312</li>
            </ul>
            <ul>
                <li>321</li>
                <li>322</li>
            </ul>
        </div>

        <script type="text/javascript">
        ( () => {

            let traversal = function( element ){

                let currentFunction = arguments.callee ;

               // element存在 且 element拥有nodeType属性 且 该属性值与Node.ELEMENT_NODE全等
               if( element && element.nodeType && element.nodeType === Node.ELEMENT_NODE ){
                    // node即为当前需要处理的元素(Element)
                    console.log( element.nodeName.toLowerCase() );

                    // 取元素的属性
                    let names = element.getAttributeNames();
                    names.forEach( name => {
                        let value = element.getAttribute( name );
                        console.log( '\t' , name , ':' , value );
                    });
               }

               if( element.childElementCount > 0 ){
                    // console.log( element.children );
                    // element.children 是一个 由 element 的所有 子元素节点组成的 HTMLCollection
                    let children = Array.from( element.children ) ; 
                    children.forEach( e => {
                        currentFunction( e );
                    } );
               }

               /*
               if( node.hasChildNodes() ) {
                   // 在没有 Array.form 的日子里，
                   // 我们用 Array.prototype.slice.call( arrayLike ) 方式将类数组实例转换为数组实例
                   // let childs = Array.prototype.slice.call( node.childNodes );
                   //console.log( Array.isArray( node.childNodes ) );
                   // 利用 Array.prototype 是否存在于 指定实例的原型链上来判断该实例是否是数组
                   //console.log( Array.prototype.isPrototypeOf( node.childNodes ) );
                   let childs = Array.from( node.childNodes );
                   // console.log( childs );
                   //console.log( Array.isArray( childs ) );
                   //console.log( Array.prototype.isPrototypeOf( childs ) );
                   childs.forEach( n => {
                        currentFunction( n );
                   } );
               }
               */
            }

            // 虽然 Document 和 Element 都继承了 Node ，他们都是 Node
            // 但是 Document 不是 Element ，但是在 Document 中可以包含众多 Element
            let html = document.firstElementChild ; // 有别于 firstChild
            traversal( html );
        } )();
        </script>
        
    </body>
</html>